<template>
  <view class="content">
    <image class="logo" src="/static/logo.png" />

    <!-- 自定义组件 -->
    <meng-test></meng-test>
    <custom-tabs></custom-tabs>

    <!-- 图标测试 -->
    <view>
      <text class="icon-symbol icon-symbol-tool-05"></text>
      <text class="iconfont icon-box"></text>
    </view>

    <view class="text-area">
      <navigator
        class=""
        target=""
        url="/subpkg_test/test/index"
        hover-class="navigator-hover"
        open-type="navigate"
      >
        <text class="title">{{ title }}</text>
      </navigator>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { request } from '@/utils/request'
const title = ref('Hello ts')
// 请求测试
const getList = async () => {
  const res = await request.get('/patient/home/knowledge', {
    // 通过自定义参数控制是否显示 loading
    custom: {
      loading: true,
    },
    params: {
      type: 'recommend',
      current: 1,
      pageSize: 10,
    },
  })
  console.log(res)
}
getList()

// 表单数据
const formData = ref({
  mobile: '13212345678',
  password: 'abc12345',
  alt: '关于我的描述',
})

// 表单验证规则
const formRules = {
  mobile: {
    rules: [
      { required: true, errorMessage: '请填写手机号码' },
      { pattern: '^[1][3-8][0-9]{9}$', errorMessage: '手机号码格式不正确' },
    ],
  },
  password: {
    rules: [
      { required: true, errorMessage: '请输入密码' },
      { pattern: '^[a-zA-Z0-9]{8}$', errorMessage: '密码格式不正确' },
    ],
  },
}
</script>
<script lang="ts">
// 选项式
export default {
  options: {
    styleIsolation: 'shared',
  },
}
</script>

<style lang="scss">
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: $meng;
  border: $wang;
}
</style>
